<template>
	<view class="custom">
		<u-navbar
			title="初级实名认证" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="content-page">
			<view class="item flex-a">
				<view class="label">
					真实姓名
				</view>
				<view>
					<input :value="name" class="input-class" placeholder="请输入真实的姓名" @input="nameChanged"/>
				</view>
			</view>
			<view class="tip-text">
				提现也必须是这个身份证所开的银行卡{{onlineAudit ? '' : '，支付宝'}}账户，请注意填写
			</view>
			<view class="item flex-a">
				<view class="label">
					身份证号
				</view>
				<view>
					<input :value="idNumber" class="input-class" placeholder="请输入您的身份证号" @input="IdNumberChanged"/>
				</view>
			</view>
			<view class="item flex-a">
				<view class="label">
					手 机 号
				</view>
				<view>
					<input :value="phone" type="tel" class="input-class" placeholder="请输入11位手机号" @input="phoneChanged"/>
				</view>
			</view>
			<view class="item flex-a">
				<view class="label">
					验 证 码
				</view>
				<view>
					<input :value="code" type="number" class="input-class" placeholder="请输入6位数验证码" @input="codeChanged"/>
				</view>
				<view class="code-text" v-if="codeCounting" @click="notify(`${codeCounter}秒后重新发送`)">
					{{codeCounter}}秒重新发送
				</view>
				<view class="code-text" @click="clickSendCode" v-else>
					发送验证码
				</view>
			</view>
			<u-button shape="circle" :color="`${mainColor}`" :custom-style="{marginTop: '31px', color:`${textColor}`}"
				@click="doSubmit">确认提交</u-button>
			<view class="tip">
				您提供的信息仅作为淘京收实名认证使用,
				<view>
					我们不会泄露用户任何隐私！
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { doBaseAuth, sendSMSAuth } from '@/api';
	import { systemInfo } from '@/utils/mixin';
	import {mapState} from "vuex";

	export default {
		mixins:[systemInfo],
		data() {
			return {
				name: '',
				idNumber: '',
				phone: '',
				code: '',
				codeCounter: 0,
				codeCounting: false,
				timerId: null
			}
		},
		onLoad() {
			this.getSystemInfo();
		},
		onHide() {
			this.clearCodeCounter();
		},
		computed: mapState(['onlineAudit']),
		methods: {
			nameChanged({detail}) {
				this.name = detail.value.trim();
			},
			IdNumberChanged({detail}) {
				this.idNumber = detail.value.trim();
			},
			phoneChanged({detail}) {
				this.phone = detail.value.trim();
			},
			codeChanged({detail}) {
				this.code = detail.value.trim();
			},
			async clickSendCode() {
				if (this.phone.length === 0) {
					this.notify('手机号码不能为空！');
					return
				}
				
				if (this.phone.length < 11 || !/^1[3-9][0-9]{9}$/.test(this.phone)) {
					this.notify('手机号码格式不正确！');
					return
				}
				
				const res = await sendSMSAuth(this.phone, 'auth');
				if (res.code === 2000) {
					this.notify('验证码发送成功');
					this.code = '';
					this.codeCounter = 120;
					this.codeCounting = true;
					this.timerId = setInterval(() => {
						this.codeCounter -= 1;
						if (this.codeCounter <= 0) {
							this.clearCodeCounter();
						}
					}, 1000)
				}
				
				if (res.data.code) {
					this.notify(`验证码：${res.data.code}`, 3000);
				}
			},
			async doSubmit() {
				if (this.name.length === 0) {
					this.notify('真实姓名不能为空！');
					return
				}
				
				if (this.idNumber.length === 0) {
					this.notify('身份证号码不能为空！');
					return
				}
				
				if (!/(^\d{15}$)|(^\d{17}[\dXx]$)/.test(this.idNumber)) {
					this.notify('身份证号码格式不正确！');
					return
				}
				
				if (this.phone.length === 0) {
					this.notify('手机号码不能为空！');
					return
				}
				
				if (this.phone.length < 11 || !/^1[3-9][0-9]{9}$/.test(this.phone)) {
					this.notify('手机号码格式不正确！');
					return
				}
				
				if (this.code.length === 0) {
					this.notify('验证码不能为空！');
					return
				}
				
				const res = await doBaseAuth(this.name, this.idNumber, this.phone, this.code);
				if (res.code === 2000) {
					this.setToast(res.msg);
					uni.navigateBack();
				} else {
					this.name = null;
					this.idNumber = null;
					this.phone = null;
					this.code = null;
				}
			},
			clearCodeCounter() {
				this.codeCounter = 0;
				this.codeCounting = false;
				if (this.timerId) {
					clearInterval(this.timerId);
					this.timerId = null;
				}
			},
			notify(message, duration) {
				uni.showToast({
					icon:'none',
					title:message,
					duration:duration||1500
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-page {
    padding: 0 10px 0;
	
	.item {
	    position: relative;
	    font-size: 13px;
	    color: #6f6f6f;
	    height: 52px;
	    line-height: 52px;
	    border-bottom: 1px solid #f1f1f1;
		
		.label {
		    width: 72px;
		}
		
		.input-class {
		    font-size: 13px;
		    margin-top: 14px;
		}
	}
	
	.tip-text {
	    font-family: Times New Roman;
	    padding: 5px 10px;
	    font-size: 11px;
	    background-color: #fff5f4;
	    margin-top: 10px;
	}
	
	.code-text {
	    position: absolute;
	    right: 20px;
	    color: #e33233;
	}
	
	.code-text:active {
		color: rgba(227, 50, 51, 0.5)
	}
	
	.tip {
	    margin: 31px 0 0;
	    font-size: 11px;
	    text-align: center;
	    color: #ccc;
	    line-height: 20px;
	}
}
</style>
